<template>
  <el-dialog v-model="dialog" title="部门消息" width="912px" center destroy-on-close>
		<el-container>
			<!-- 1. 左侧表格 -->
			<el-aside width="416px">
				<div class="message-list-wrapped">
					<div class="list-table-content">
						<el-table :data="tableData" style="width: 100%;" highlight-current-row @row-click="getDetail">
							<el-table-column type="index" width="50" />
							<el-table-column width="5">
								<template #default='{ row}'>
									<div :class="idInList(row.id) ? 'readed' : 'noread'"></div>
								</template>
							</el-table-column>
							<el-table-column label="主题" prop="message_title">
								<template #default='{ row}'>
									<div class="title-wrapped">
										<div class="title">{{row.message_title}}</div>
									</div>
								</template>
							</el-table-column>
							<el-table-column label="等级" prop="message_level">
								<template #default='{row}'>
									<el-tag class="mx-1" round
										v-if="row.message_level=='一般'">{{row.message_level}}</el-tag>
									<el-tag type="warning" class="mx-1" round
										v-if="row.message_level=='重要'">{{row.message_level}}</el-tag>
									<el-tag type="danger" class="mx-1" round
										v-if="row.message_level=='必要'">{{row.message_level}}</el-tag>
								</template>
							</el-table-column>
							<el-table-column label="发布日期" prop="message_publish_time">
								<template #default='{row}'>
									<div>{{row.message_publish_time?.slice(0,10)}}</div>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</div>
			</el-aside>

			<!-- 2. 右侧内容  -->
			<el-main>
				<div class="detail-wrapped" v-if="messageInfo.message_title!==''">
					<div>{{ messageInfo.message_title }}</div>
					<div v-html="messageInfo.message_content"></div>
				</div>
				<div class="detail-wrapped" v-else>请点击列表中的消息进行查看</div>
			</el-main>
		</el-container>
  </el-dialog>
</template>
 
<script setup lang="ts">
  import { reactive, ref, onBeforeUnmount } from 'vue';
	import { getDepartmentMsg, getDepartmentMsgList, getReadListAndStatus, clickDelete, changeUserReadListButDeleteById } from '@/api/dep_msg.js';
	import { updateClick } from '@/api/message.js';  // 更新点击量
	import { useMsg } from '@/store/message.js';  // 部门消息 
	import { bus } from "@/utils/mitt.js";

	const msgStore = useMsg()
	const tableData = ref([])
	const readList = ref([]) // 存储用户未读消息列表的数组,通过idInList函数，可以检查某条消息是否在 readList 中

	// 检查给定的 id 是否存在于 readList 数组中,返回值用于决定显示readed或noread类，这两个类负责定义消息状态的视觉样式
	const idInList = (id : number) => {
		if (readList.value.indexOf(id) !== -1) {  // 没找到是-1，id是消息的id
			return 0
		} else {
			return 1
		}
	}

	const messageInfo = reactive({
		message_title: '',
		message_content: ''
	})
	
	// 获取左侧内容列表  getDepartmentMsg 
	const getUserDepartmentMessage = async () => {
		const id = localStorage.getItem('id')
		const department = localStorage.getItem('department')
		if (department !== null) {
			const res = await getDepartmentMsgList(department)  // 根据部门信息获取消息列表 
			const resAll = await getDepartmentMsgList('全体成员') 
			// console.log("resAll", resAll.data); // 数组，里面是对象
			const resSum = [...res.data, ...resAll.data]
			tableData.value = resSum
			const res2 = await getReadListAndStatus(id)   // 根据用户ID获取用户的阅读状态和未读列表
			if (res2.data[0].read_status == 0) {  // read_status == 0 没获取未读消息列表，并将结果赋值给 readList.value
				const res3 = await getDepartmentMsg(id, department)   
				readList.value = res3.data.read_list
				console.log('read_status = 0, read_list =',res3.data.read_list); 
			} else {                              // 如果用户的阅读状态为 1 获取未读消息列表，则直接从 res2.data[0].read_list 解析并赋值给 readList.value
				readList.value = JSON.parse(res2.data[0].read_list)
				console.log('read_status = 1, read_list =',res2.data[0].read_list); 
				if(readList.value.length>0){
					bus.emit('msgRed', 1)
				}else{
					bus.emit('msgRed', 0)
				}
			}
		}
	}
	getUserDepartmentMessage()
	
	// 获取右侧具体内容
	const getDetail = async (row : any) => {
		await updateClick(row.message_click_number, row.id)
		await clickDelete(row.id, localStorage.getItem('id'))
		messageInfo.message_title = row.message_title
		messageInfo.message_content = row.message_content
		await changeUserReadListButDeleteById(localStorage.getItem('id'), row.id, row.department)  // 用户id 消息id 用户部门 红点消失
		msgStore.returnReadList(localStorage.getItem('id'))
		getUserDepartmentMessage()
	}
	
  // ---------------------------------------------------------------------------------------------------------------弹窗
	const dialog = ref(false)
	// 暴露open
	const open = () => {
		dialog.value = true
	}
	defineExpose({
		open
	})
	onBeforeUnmount(()=>{
    bus.all.clear()
  })
</script>
 
<style lang="scss" scoped>
	.el-aside {
		padding-left: 8px;
		min-height: 500px;
	}

	.el-main {
		min-height: 500px;
		--el-main-padding: 0px;
		border-left: 1px solid #eee;
	}

	.message-list-wrapped {
		height: 500px;
	}

	.list-table-content {
		min-height: 10px;
		padding: 8px;
	}

	.el-table {
		height: 100%;

		.title-wrapped {
			display: flex;
			align-items: center;
		}

		.title {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}

	.readed {
		display: block;
		width: 5px;
		padding: 1px;
		height: 5px;
		border-radius: 50%;
		background: #A9A9A9;
	}

	.noread {
		display: block;
		width: 5px;
		padding: 1px;
		height: 5px;
		border-radius: 50%;
		background: #FFA500;
	}

	.detail-wrapped {
		padding: 8px;
	}
</style>